<template>
  <div class="homePage">
    <h2 style="color: #144e8b">矿长计分汇总</h2>
    <div class="contBox">
      <div class="echartsContainer" ref="echartsContainer"></div>
      <div class="tabList">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="order" label="排名"> </el-table-column>
          <el-table-column prop="mineScore" label="计分"> </el-table-column>
          <el-table-column prop="mineManager" label="矿长"> </el-table-column>
          <el-table-column prop="mineName" label="所属矿"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="scoreDetail(scope.row)"
                >计分详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="goBack" @click="goBack" v-if="this.leave !== 1">
      <i class="el-icon-back" style="color: #144e8b">{{ title }}</i>
    </div>

    <detail
      :popObj="popDetail"
      @cancelPop="cancelDetailPop"
      :detailForm="detailForm"
      v-if="popDetail.dialogVisible"
    >
    </detail>
  </div>
</template>
<script>
import * as echarts from "echarts";
import xinjiangData from "./mapJson/xinjiang.json";
import wulumuqiData from "./mapJson/wulumuqi.json";
import kelamayi from "./mapJson/kelamayi.json";
import tulufan from "./mapJson/tulufan.json";
import hamishi from "./mapJson/hamishi.json";
import changjihuizu from "./mapJson/changjihuizu.json";
import boertala from "./mapJson/boertala.json";
import bayin from "./mapJson/bayin.json";
import akesu from "./mapJson/akesu.json";
import kezinesukeer from "./mapJson/kezinesukeer.json";
import keshidiqu from "./mapJson/keshidiqu.json";
import hetian from "./mapJson/hetian.json";
import yilihashashi from "./mapJson/yilihashashi.json";
import tachengdiqu from "./mapJson/tachengdiqu.json";
import ataile from "./mapJson/ataile.json";

import {
  getMineMapServe,
  getMineInfoTopServe,
  getMinePosition,
} from "@/api/index";
import { getScore } from "@/api/assessmentScoring";
import detail from "./components/detailComponent.vue";

export default {
  components: { detail },
  data() {
    return {
      myChart: "",
      // 返回按钮显示隐藏
      mapBackNum: 1,
      leave: 1,
      mapType: "province", // 省：province;市：city
      mapName: "新疆", //地图名称，默认新疆
      geoCoordMap: {},
      mapList: {
        新疆: xinjiangData,
        乌鲁木齐市: wulumuqiData,
        克拉玛依市: kelamayi,
        吐鲁番市: tulufan,
        哈密市: hamishi,
        昌吉回族自治州: changjihuizu,
        博尔塔拉蒙古自治州: boertala,
        巴音郭楞蒙古自治州: bayin,
        阿克苏地区: akesu,
        克孜勒苏柯尔克孜自治州: kezinesukeer,
        喀什地区: keshidiqu,
        和田地区: hetian,
        伊犁哈萨克自治州: yilihashashi,
        塔城地区: tachengdiqu,
        阿勒泰地区: ataile,
      },
      seriesData: [],
      tableData: [],
      dialogVisible: false,
      popDetail: {
        popName: "detailFOrm",
        dialogTitle: "执法详情",
        dialogVisible: false,
        popupWidth: "800px",
        showFooter: true,
      },
      detailForm: {},
      title: "",
      isClick:true
    };
  },
  computed: {
    // 创建一个计算属性，它总是返回一个对象，包含所有你想监听的值
    mapParams: function () {
      return {
        mapType: this.mapType,
        leave: this.leave,
      };
    },
  },
  watch: {
    // 监听计算属性的变化，而不是直接监听数据项
    mapParams: {
      handler: function (newVal, oldVal) {
        console.log("this.mapType", this.mapType, this.leave);
        this.title =
          this.mapType == "province"
            ? "新疆"
            : this.mapType == "city"
            ? `新疆/${this.mapName}`
            : "";
        this.initChartMap();
      },
    },
  },
  mounted() {
    if (!this.myChart) {
      this.myChart = echarts.init(this.$refs.echartsContainer);
    }
    this.myChart.on("click", (params) => {
      if (this.leave >= 3) {
        this.leave = 3;
      } else {
        this.leave++;
      }

      try {
        if (this.leave == 1 || this.leave == 2) {
          this.mapName = "新疆";
        } else {
          this.mapName = params.name;
        }

        this.mapType = this.mapName == "新疆" ? "province" : "city";
      } catch (error) {}
    });

    // this.initChartMap();
    this.getPosition();
  },
  methods: {
    goBack() {
      if (this.isClick) {
        this.leave--;
        this.mapType = "province";
        this.mapName = "新疆";
      }
    },
    getPosition() {
      let options = {
        mapType: this.mapType,
        mapName: this.mapName,
      };
      getMinePosition(options).then((res) => {
        this.mapName = res;
        if (res.indexOf("市") == -1) {
          this.isClick = true
          this.mapType = "province";
          this.leave = 1;
        } else if (res.indexOf("省") == -1) {
          this.mapType = "city";
          this.leave = 3 | 2;
          this.isClick = false
        }
        this.initChartMap();
      });
    },
    getGeoCoordMap() {
      let geoCoord = {};
      this.mapList[this.mapName].features.map((item) => {
        geoCoord[item.properties.name] = item.properties.centroid;
      });
      this.geoCoordMap = geoCoord;
    },
    detailSeriesData(data) {
      let mineType1 = 0,
        mineType2 = 0,
        mineType3 = 0,
        total = 0;
      data.map((item) => {
        total += item.value;
        item.mineMapChildVo.map((i) => {
          switch (i.mineType) {
            case 1:
              mineType1 += i.mineNumber;
              break;
            case 2:
              mineType2 += i.mineNumber;
              break;
            case 3:
              mineType3 += i.mineNumber;
              break;
          }
        });
      });
      return [
        {
          name: "乌鲁木齐市",
          value: total,
          mineMapChildVo: [
            {
              mineType: 1,
              mineNumber: mineType1,
            },
            {
              mineType: 2,
              mineNumber: mineType2,
            },
            {
              mineType: 3,
              mineNumber: mineType3,
            },
          ],
        },
      ];
    },
    initChartMap() {
      this.getGeoCoordMap();
      this.getScoreTops5();
      let options = {
        mapType: this.mapType,
        mapName: this.mapName,
      };
      getMineMapServe(options).then((res) => {
        if (res.code == 200) {
          if (this.leave == 1) {
            this.seriesData = this.detailSeriesData(res.data);
          } else {
            this.seriesData = res.data;
          }
          this.loadMap(
            this.myChart,
            this.mapList[this.mapName],
            this.mapName,
            this.geoCoordMap,
            this.seriesData
          );
        }
      });
    },
    getScoreTops5() {
      let options = {
        mapType: this.mapType,
        mapName: this.mapName,
      };
      getMineInfoTopServe(options).then((res) => {
        if (res.code == 200) {
          let order = 0;
          res.data?.forEach((item) => {
            order++;
            item.order = order;
          });
          this.tableData = res.data;
        }
      });
    },
    scoreDetail(row) {
      this.popDetail.dialogVisible = true;
      this.detailForm = {
        mapType: this.mapType,
        mapName: this.mapName,
        mineName:row.mineName,
        mineManagerName: row.mineManager,
      };
    },
    cancelDetailPop() {
      this.popDetail.dialogVisible = false;
    },
    convertData(data, geoCoordMap) {
      let scatterData = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          scatterData.push({
            name: data[i].name,
            itemStyle: { color: "rgba(209,250,12,0.5)" }, //标志颜色
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return scatterData;
    },
    loadMap(mapInstnce, mapCode, name, geoCoordMap, seriesData) {
      echarts.registerMap(name, mapCode);
      function getToolTipsData(data, index) {
        return data.filter((item) => item.mineType == index);
      }
      let option = {
        visualMap: {
          show: false,
        },
        tooltip: {
          //提示框组件。
          trigger: "item",
          formatter(params, ticket, callback) {
            if (params.componentType === "series") {
              let res = `
                            <div>
                                <div style='margin:10px;color:#000;'>
                                    <p>${params.name}</p>
                                    <p>煤矿：${
                                      getToolTipsData(
                                        seriesData[params.dataIndex]
                                          .mineMapChildVo,
                                        1
                                      )[0].mineNumber
                                    }</p>
                                    <p>金属矿：${
                                      getToolTipsData(
                                        seriesData[params.dataIndex]
                                          .mineMapChildVo,
                                        2
                                      )[0].mineNumber
                                    }</p>
                                    <p>非金属矿：${
                                      getToolTipsData(
                                        seriesData[params.dataIndex]
                                          .mineMapChildVo,
                                        3
                                      )[0].mineNumber
                                    }</p>
                                </div>
                               </div>
                               `;
              return res;
            }
          },
        },
        geo: {
          /* geo:地理坐标系组件，地理坐标系组件用于地图的绘制。*/
          // roam: true, // 是否开启鼠标缩放和平移漫游
          // scaleLimit: { //滚轮缩放的极限控制
          //     min: 1,
          //     max: 23
          // },
          zoom: 1.2, // 地图放大
          map: name,
          label: {
            /* 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 */
            normal: {
              //通常状态下的样式
              show: true, //是否显示标签(地图上每块地方的名字)
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              //鼠标放上去高亮的样式
              textStyle: {
                color: "rgba(209,250,12,0.5)",
              },
            },
          },
          itemStyle: {
            //地图区域的多边形图形样式
            normal: {
              borderColor: "rgba(37,124,169)",
              areaColor: "rgba(20,78,139,1)",
              borderWidth: 1.5,
            },
            //鼠标放上去高亮的样式
            emphasis: {
              areaColor: "rgba(0,102,154,1)",
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            //散点系列数据
            type: "effectScatter", //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
            coordinateSystem: "geo", //该系列使用的坐标系:地理坐标系
            effectType: "ripple", //特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
            showEffectOn: "render", //配置何时显示特效。可选'render'(绘制完成后显示特效)和'emphasis'(高亮的时候显示特效) 。
            rippleEffect: {
              //涟漪特效相关配置
              period: 10, // 动画的周期，秒数。
              scale: 4, // 动画中波纹的最大缩放比例。
              brushType: "stroke", // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                  fontSize: 9,
                },
              },
            },

            zlevel: 1, //所有图形的zlevel值
            data: this.convertData(seriesData, geoCoordMap),
            symbolSize: 25,
          },
        ],
      };
      mapInstnce.setOption(option);
      window.onresize = mapInstnce.resize;
    },
  },
};
</script>
<style scoped lang="scss">
.homePage {
  width: 100%;
  // height:100%;
  min-height: calc(100vh - 84px);
  position: relative;
  text-align: center;

  > .contBox {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10px 0 20px;

    > .echartsContainer {
      height: calc(100vh - 150px);
      width: 65%;
    }

    > .tabList {
      padding-top: 20px;
      flex: 1;
      // border:1px solid red;
    }
  }

  > .goBack {
    // width: 50px;
    height: 30px;
    position: absolute;
    top: 10px;
    left: 10px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    // border:1px solid red;
    cursor: pointer;
  }
}
</style>